<template>
  <div>
    <language-control>
      <template #default="{ switchLanguage }">
        <button type="button" class="header-button" @click="switchLanguage">
          <span class="absolute -inset-1.5" />
          <span class="sr-only">
            {{ t('appHeader.currentLanguage') }}
          </span>
          <language-icon class="h-6 w-6" aria-hidden="true" />
        </button>
      </template>
    </language-control>
  </div>
</template>

<script setup lang="ts">
import { LanguageIcon } from '@heroicons/vue/24/outline';
import { useI18n } from 'vue-i18n';
const i18n = reactive(useI18n());
const { t } = toRefs(i18n);
</script>
